<template>
    <div class="student">
        <h1>{{msg}}</h1>

        <h2>学生名称：{{name}}</h2>
        <h2>学生年龄：{{myAge}}</h2>
        <h2>学生性别：{{sex}}</h2>

        <button @click="updateAge()">尝试修改收到的年龄</button>
        <hr>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            console.log(this);
            return {
                msg: '欢迎来到尚硅谷学习Vue!!!',
                myAge: this.age,
            }
        },
        methods: {
            updateAge() {
                this.myAge++;
            }
        },

        // 第一种方式：props 简单声明接受
        // props: ['name', 'age', 'sex']

        // 第二种方式：接受的同时对数据进行类型限制
        // props: {
        //     name: String,
        //     age: Number,
        //     sex: String
        // }

        // 第三种方式：接受的同时对数据，进行类型限制、默认值的指定、必要性的限制
        props: {
            name: {
                type: String, // name 的类型是字符串
                required: true, // name是必要的
            },
            age: {
                type: Number,
                default: 99, // 默认值
            },
            sex: {
                type: String,
                required: true,
            }
        }
    }
</script>

<style>
    .student {
        background-color: gray;
    }
</style>